<template>
	<div>
		<div style="width: 800px;margin-left: 180px;">
			<el-form ref="form" :model="bodyData" label-width="80px">
				<el-form-item label="年龄">
					<el-input v-model="bodyData.userAge"></el-input>
				</el-form-item>
				<el-form-item label="体重(kg)">
					<el-input v-model="bodyData.userWeight"></el-input>
				</el-form-item>
				<el-form-item label="身高(m)">
					<el-input v-model="bodyData.userHeight"></el-input>
				</el-form-item>
				<el-form-item label="胸围(cm)">
					<el-input v-model="bodyData.userChest"></el-input>
				</el-form-item>
				<el-form-item label="腰围(cm)">
					<el-input v-model="bodyData.userGirth"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">提交</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div style="width: 1000px;margin-left: 150px;">
			<div
				style="text-align: center;margin-top: 50px;border-radius: 30px;border: 2px solid gainsboro;width: 100px;height: 50px;line-height: 50px;">
				基本信息</div>
			<div style="margin-top: 30px;">
				<template>
					<el-table :data="pageInfo.list" border style="width: 100%">
						<el-table-column prop="submitTime" label="提交时间">
						</el-table-column>
						<el-table-column prop="userWeight" label="体重(kg)" width="180">
						</el-table-column>
						<el-table-column prop="userHeight" label="身高(m)">
						</el-table-column>
						<el-table-column prop="bmi" label="BMI">
						</el-table-column>
						<el-table-column prop="userChest" label="胸围(cm)" width="180">
						</el-table-column>
						<el-table-column prop="userGirth" label="腰围(cm)" width="180">
						</el-table-column>
					</el-table>
				</template>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
						:total="pageInfo.total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageInfo: '',
				currentPage: 1,
				pageSize: 5,
				bodyData: {
					userId:1,
					userAge: '',
					userWeight: '',
					userHeight: '',
					userChest: '',
					userGirth: ''
				}
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
				this.axios.post("http://localhost:8080/user/bodyData", this.bodyData).then(res => {
					if (res.data.code == 200) {
						//添加成功
						this.$message.success(res.data.msg);

					} else {
						//添加失败
						this.$message.warning(res.data.msg);
					}
				})
			},
			getList() {

				this.axios.get("http://localhost:8080/user/bodyData/" + 1 + "/" + this.currentPage + '/' + this.pageSize)
					.then(
						res => {
							console.log(res.data.data);
							this.pageInfo = res.data.data
						})

			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getList();
			},
		},
		created() {
			this.getList();
		}
	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;

		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
		/* height: 150px; */
	}

	.bg-purple {
		background: #d3dce6;
		height: 150px;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
